import React, { useEffect, useState, useRef } from "react";
import { useNavigate } from "react-router-dom";
import { NavBar } from "react-vant";
import { ShareO } from "@react-vant/icons";
import axios from "axios";
import { Button, SearchBar, Dropdown, Radio, Space, Toast } from "antd-mobile";
import { SearchBarRef } from "antd-mobile/es/components/search-bar";
import { ArrowDownCircleOutline, DownOutline } from "antd-mobile-icons";
import "./index.css";
const Index: React.FC = () => {
  const navigate = useNavigate();

  const xzcity = () => {
    navigate("/search");
  };
  let [sortlist, setSortlist] = useState<any>([]);
  const render = () => {
    axios.get("/api/sortlist").then((resp) => {
      setSortlist(resp.data.sortlist);
    });
  };
  useEffect(() => {
    render();
  }, []);
  const sx = () => {
    let sxlist = [...sortlist].sort((a: any, b: any) => {
      return a.count - b.count;
    });
    setSortlist(sxlist);
  };
  const jx = () => {
    let jxlist = [...sortlist].sort((a: any, b: any) => {
      return b.count - a.count;
    });
    setSortlist(jxlist);
  };

  return (
    <div>
      <div className="sorttop">
        <NavBar title="医生列表" onClickLeft={() => navigate(-1)} />
        <div onClick={xzcity}>
          <SearchBar placeholder="请输入内容" />
        </div>
        <div className="sjbtn">
          <Button color="primary" id="sxbtn" onClick={() => sx()}>
            升序⬆
          </Button>
          <Button color="primary" id="jxbtn" onClick={() => jx()}>
            降序⬇
          </Button>
        </div>
      </div>
      <div className="sjlist">
        {sortlist.length > 0 &&
          sortlist.map((item, index) => (
            <div key={index}>
              <div>
                <div>
                  <img src={item.img} />
                </div>
                <div>标题：{item.title}</div>
                <div>数量：{item.count}</div>
              </div>
            </div>
          ))}
      </div>
    </div>
  );
};
export default Index;
